<#include "layout/template.ftl"/>

<@htmlHead title="新增网点">
	 <style>
		#allmap {width:100%;height:500px;}
	</style>
	<link rel="stylesheet" href="${resources}/css/fileupload.css" />
	<link href="${resources}/plugins/bootstrap-datetimepicker/2.3.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
</@htmlHead>


<@htmlBody 'branch' 'branchManage'>

	<!-- breadcrumbs begin -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '网点管理' '新增网点'></@breadcrumbs>
	<!-- breadcrumbs end -->

	<!-- page-content begin -->
	<div class="page-content">
			
			<!-- page-header begin -->
			<div class="page-header">
					<h1>
						网点编辑
					</h1>
			</div>
			<!-- page-header end -->

			<!-- page-body begin -->
			<div class="row">	
				<div class="col-md-8 col-md-offset-2">
				
						<!-- 表单开始 -->
						<form class="form-horizontal" id="validation-form" method="post" action="${path}/manage/bank/branch/update/${branch.id}" >
								<input type="hidden" name="id" value="${branch.id}"></input>
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name">网点名称:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control"  placeholder="请输入网点名称" name="name"   id="name" value="${branch.name}" />
										</div>
									</div>
								</div>
								
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="name">网点类型:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<select id="type" name="type" style="width: 100%";> 
												<option  <#if 1==branch.type> selected="selected" </#if>  value="1">银行</option>
												<option  <#if 2==branch.type> selected="selected" </#if> value="2">支行</option>
											</select>
										</div>
									</div>
								</div>
								
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="cpname">联系人:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入联系人" name="linkman"   id="linkman" value="${branch.linkman}" />
										</div>
									</div>
								</div>


								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="cpname">联系方式:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入联系方式" name="telephone"   id="telephone" value="${branch.telephone}" />
										</div>
									</div>
								</div>
								

								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="cpname">网点介绍:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入介绍" name="intro"   id="intro" value="${branch.intro}" />
										</div>	
									</div>
								</div>


								<input name="picurl" id="picurl" value="${branch.picurl}" type="hidden">
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="picurl">网点图片:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<div class="settingView">
												<img id="file_0_pic" src="${branch.picurl}"/>
												<input class="picinput" multiple="" type="file" name="file" id="file_0" data-id="file_0" data-img="file_0_pic"  data-txt="file_0_txt" />
											</div>
										</div>
									</div>
								</div>
								
								
								<div class="form-group">
									<label class="control-label col-md-2 no-padding-right" for="cpname">网点定位:</label>
									<div class="col-md-10">
										<div class="clearfix">
											<input type="text" class="form-control" placeholder="请输入详细地址" name="address" onblur="allmap()"   id="address" value="${branch.address}" />
											
											<input type="hidden" name="longitude"   id="longitude" value="${branch.longitude}" />
											<input type="hidden" name="latitude"   id="latitude" value="${branch.latitude}" />
											
											<div id="allmap"></div>
										</div>	
									</div>
								</div>
								
								
								
								
						</form>
						<!-- 表单结束 -->
						
						


						<!-- 提交开始 -->
	                    <div class="form-group">
	                    	<div class="col-md-8 center">
		                    	<button id="form-submit" type="button" onclick="mysubmit('validation-form')"  class="btn btn-primary">
									<i class="fa fa-save align-top bigger-125"></i>保存
								</button>
							 
								<button type="reset" class="btn">
									<i class="fa fa-pencil align-top bigger-125"></i>重置
								</button>
							</div>					
                   		</div>
						<!-- 提交结束  -->
				</div>
			</div>
			<!-- page-body end -->
		
	</div>		
	<!-- page-content end -->

</@htmlBody>



<@htmlBodyScript>

	<!-- 百度地图 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xVvsn3oF1vhtA1Ggi4ZfW4VWWgP3wmML"></script>

	<!-- 地图 -->
	<script type="text/javascript">
		$(function(){
			
			var longitude=$("#longitude").val();
			var latitude=$("#latitude").val();
			
			// 百度地图API功能
			var map = new BMap.Map("allmap");    // 创建Map实例
			map.centerAndZoom(new BMap.Point(longitude, latitude),16);  // 初始化地图,设置中心点坐标和地图级别
			map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
			map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			//标注地址
			map.addOverlay(new BMap.Marker(new BMap.Point(longitude, latitude)));
			
			
		})
	
	
		//定位文本框中的地址 获取地址的经纬度
		function allmap(){
			var address=$("#address").val();
			// 百度地图API功能
			var map = new BMap.Map("allmap");
			map.enableScrollWheelZoom(true);   //启用滚轮放大缩小，默认禁用
			map.enableContinuousZoom(true);    //启用地图惯性拖拽，默认禁用
			//单击获取点击的经纬度
			map.addEventListener("click",function(e){
			//	alert(e.point.lng + "," + e.point.lat);
			});
			var point = new BMap.Point(116.331398,39.897445);
			map.centerAndZoom(point,24);
			// 创建地址解析器实例
			var myGeo = new BMap.Geocoder();
			// 将地址解析结果显示在地图上,并调整地图视野
			myGeo.getPoint(address, function(point){
				
				
				if (point) {
					// 将经纬度放入隐藏域
					$("#longitude").val(point.lng); //经度
					$("#latitude").val(point.lat);//纬度
					// 设置地图缩放比例
					map.centerAndZoom(point, 24);
					// 设置地图选中地址标注
					map.addOverlay(new BMap.Marker(point));
				}else{
					alert("您选择地址没有解析到结果!");
				}
			}, "北京市");
			
		}
		
		
		
	</script>




	<!-- 上传控件 -->
	<script type="text/javascript" src="${resources}/assets/js/ajaxfileupload.js"></script>
	<script src="${resources}/plugins/letsun-upload/upload.js"></script>
	<script>
	    /**
	     * 功能 : 提交表单
		 */
	 	function mysubmit(form){
	 		$("#"+form).submit();
	 	}
		
	</script>




	<!-- 日期控件-->
 	<script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/bootstrap-datetimepicker.js"></script>
   <script src="${resources}/plugins/bootstrap-datetimepicker/2.3.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script>
		$("#birthday").datetimepicker({
			bootcssVer:3,
		    format: "yyyy-mm-dd",
		    language:"zh-CN",
			weekStart: 1,
        	todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
		});
	</script>
	
	
	
	
	<!-- 验证框架 -->	
	<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
	<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
	<script type="text/javascript">

			jQuery.validator.addMethod("isName", function(value, element) {       
	 			var corpName =  /^[\u0391-\uFFE5\w\-\s\.]{1,50}$/;
  				 return this.optional(element) || corpName.test(value);       
 			}, "请使用汉字、英文字母、数字、下划线、减号、空格或点");   
 			
	
			jQuery.validator.addMethod("isUserName", function(value, element) {       	
				var loginName = /^[a-zA-Z0-9_]{1,50}$/; 
				var mail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
	 			var mobile = /^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])\d{8}$/; 
	 			return this.optional(element) || (mobile.test(value) ||  loginName.test(value) || mail.test(value));       
	 		}, "请使用英文字母,数字,下划线,长度为小于50个字符");    
	 		
			$('#validation-form').validate({
				errorElement: 'div',
				errorClass: 'help-block',
				focusInvalid: false,
				rules: {
					name: {
						required:true,
						maxlength: 30
					},
					linkman: {
						required:true,
						maxlength:20
					},
					telephone:{
						required:true,
						maxlength:20,
						digits:true
						
					},
					intro:{
						required:true,
						maxlength:200,
					}
				},
		
				messages: {
					
				},
		
		
				highlight: function (e) {
					$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
				},
		
				success: function (e) {
					$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
					$(e).remove();
				},
		
				errorPlacement: function (error, element) {
					if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
						var controls = element.closest('div[class*="col-"]');
						if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
						else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
					}
					else if(element.is('.select2')) {
						error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
					}
					else if(element.is('.chosen-select')) {
						error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
					}
					else error.insertAfter(element.parent());
				},
		
				submitHandler: function (form) {
					form.submit();
				},
				invalidHandler: function (form) {
				}
			});
			
			//上传图片
			$(".picinput").uploadPreview({
				Width: 120,
				Height: 120,
				IsCompression: true,
				Url: "${path}/upload/pic",
				Success: showSuccess,
				Error:showError,
				
			});
			//回调函数
			function showSuccess(id,url){
				$("#"+id).val(url);
				$("#picurl").val(url);
			}
			
			function showError(id,error){
				alert(error);
			}
			
	</script>

</@htmlBodyScript>